<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>

<%@ include file="../common/header.jsp" %>

<div id="saper-container">
    <div id="saper-bd">
        <div class="subfiled-content" style="padding: 10px">
            <!--表格开始-->
            <div class="table">
                <div class="table-box">
                    <table>
                        <thead>
                        <tr>
                            <th>ID</th>
                            <th>类型</th>
                            <th>发送者</th>
                            <th>接受者</th>
                            <th>备注内容</th>
                            <th>请求</th>
                            <th>时间</th>
                            <th>操作</th>
                        </tr>
                        </thead>
                        <tbody>
                        <c:if test="${messageList==null}">
                            <tr style="cursor: pointer">
                                <td colspan="9" style="text-align: center">目前没有任务哦</td>
                            </tr>
                        </c:if>
                        <c:if test="${messageList!=null}">
                            <c:forEach items="${messageList}" var="message">
                                <tr>
                                    <td>${message.task}</td>
                                    <td>${message.type}</td>
                                    <td>${message.sendName}</td>
                                    <td>${message.acceptName}</td>
                                    <td>${message.remarks}</td>
                                    <c:choose>
                                        <c:when test="${message.content != null}">
                                            <td>${message.content}</td>
                                        </c:when>

                                        <c:when test="${message.content == null}">
                                            <td>暂无</td>
                                        </c:when>
                                    </c:choose>

                                    <td>${message.createTime}</td>


                                    <c:if test="${message.status==null}">
                                        <td>
                                            <button class="layui-btn layui-btn-xs"
                                                    city-event="message-back"
                                                    event-id="${message.id}"
                                                    event-task="${message.taskId}"
                                                    event-msg="请求同意">同意
                                            </button>
                                            <button class="layui-btn layui-btn-danger layui-btn-xs"
                                                    city-event="message-back"
                                                    event-id="${message.id}"
                                                    event-task="${message.taskId}"
                                                    event-msg="请求拒绝">拒绝
                                            </button>
                                        </td>
                                    </c:if>

                                </tr>
                            </c:forEach>
                        </c:if>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
    <div id="saper-ft"></div>
</div>

<%@ include file="../common/footer.jsp" %>
<script type="text/javascript">

    var layer = layui.layer;
    var form = layui.form;
    var pattern_idcard = /^[1-9]\d{5}[1-9]\d{3}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{4}$/;
    var pattern_telphone = /^1[34578]\d{9}$/;
    var pattern_float_number = /^\d+\.\d{1,6}$/;
    var pattern_number = /\d*/;

    function renderForm() {
        layui.use('form', function () {
            var form = layui.form;
            form.render();
        });
    }

    // $(".buttons .sapar-btn").click(function(){
    //     var typeName = this.name.split("_")[0];
    //     var btnType = typeName+"_";
    //     var url = "/ajax/grid/save"+typeName;
    //     console.log(btnType+","+url);
    //     postDataToControll(btnType,url);
    // });

    form.on('submit(*)', function (data) {
        var typeName = this.name.split("_")[0];
        var btnType = typeName + "_";
        var url = "/ajax/grid/save" + typeName;
        console.log(btnType + "," + url);
        postDataToControll(btnType, url);
        return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
    });

    form.verify({
        maxlength: function (value) {
            if (value.length > 20) {
                return '字符数不超过20个';
            }
        },
        address: function (value) {
            if (value.length > 50) {
                return '字符数不超过50个';
            }
        }

    });

    function postDataToControll(btnType, url) {
        var inputs = $('input[name^=' + btnType + ']'), param = {};
        for (var i = 0, len = inputs.length; i < len; i++) {
            var inp = inputs[i];
            var key = $(inp).attr("name").split("_")[1];
            if (key !== undefined) {
                var re = $(inp).attr("required");
                var va = $(inp).val().trim();
                var text_len = va.length;
                //-- 非必填项
                if (re == undefined && text_len > 20) {
                    layer.msg("字数不超过20个！");
                    $(inp).focus();
                    return false;
                }
                //-- 必填项
                if (re !== undefined && va === "") {
                    layer.msg("红*标记的内容必须要填写！");
                    $(inp).focus();
                    return false;
                }
                //--必填字段不超过20字符
                if (re !== undefined && text_len >= 20) {
                    layer.msg("字数不多于20个！");
                    $(inp).focus();
                    return false;
                }
                //--电话
                if (re !== undefined && key === "reCall" && text_len != 11 && !va.match(pattern_telphone)) {
                    layer.msg("请输入11位的手机号码！");
                    $(inp).focus();
                    return false;
                }
                //--证件
                if (re !== undefined && key === "gathererIdCard" && text_len != 18 && !va.match(pattern_idcard)) {
                    layer.msg("请输入正确的身份证号码！");
                    $(inp).focus();
                    return false;
                }
                //--地址
                if (re !== undefined && key === "address" && text_len >= 50) {
                    layer.msg("字数不多于50个！");
                    $(inp).focus();
                    return false;
                }
                //--面积
                if (re !== undefined && key === "landArea" && text_len >= 10 && !va.match(pattern_number)) {
                    layer.msg("数字一共不超过10位！");
                    $(inp).focus();
                    return false;
                }
                //--经度
                if (re !== undefined && key === "lng" && text_len >= 10) {
                    layer.msg("数字和小数点一共不超过10位！");
                    $(inp).focus();
                    return false;
                } else if (re !== undefined && key === "lng" && !va.match(pattern_float_number)) {
                    layer.msg("数值不能为负数,保留6位以内的小数！");
                    $(inp).focus();
                    return false;
                }
                //--纬度
                if (re !== undefined && key === "lat" && text_len > 10) {
                    layer.msg("数字和小数点一共不超过10位！");
                    $(inp).focus();
                    return false;
                } else if (re !== undefined && key === "lat" && !va.match(pattern_float_number)) {
                    layer.msg("数值不能为负数，保留6位以内的小数！");
                    $(inp).focus();
                    return false;
                }

                var vt = $(inp).attr("value-type");
                if (vt !== undefined && vt === "integer") va = parseInt(va);
                param[key] = va;
            }
        }
        var selects = $("select[name^=" + btnType + "]");
        for (var i = 0, len = selects.length; i < len; i++) {
            var sel = selects[i];
            var key = $(sel).attr("name").split("_")[1];
            if (key !== undefined) {
                var va = $(sel).val();
                var vt = $(sel).attr("value-type");
                if (vt !== undefined && vt === "integer") va = parseInt(va);
                param[key] = va;
            }
        }

        var textareas = $("textarea[name^=" + btnType + "]");
        for (var i = 0, len = textareas.length; i < len; i++) {
            var area = textareas[i];
            var key = $(area).attr("name").split("_")[1];
            if (key !== undefined) {
                var va = $(area).val();
                var vt = $(area).attr("value-type");
                if (vt !== undefined && vt === "integer") va = parseInt(va);
                param[key] = va;
            }
        }

        console.log(JSON.stringify(param));
        $.post("" + url, {param: JSON.stringify(param)}, function (res) {
            if (res.code === 1)
                layer.msg("增加成功！", {}, function () {
                    refresh()
                });
        });

    }

    $.post("/ajax/grid/getTown", {}, function (res) {
        if (res.code === 1) {
            var data = res.data, len = res.data.length;
            if (len === 0) {
                $("select[name$=town]").html("");
                $("select[name$=town]").next().html("没有可以选取的类别");
            } else {
                var str = '';
                for (var i = 0; i < len; i++) {
                    var d = data[i];
                    str += '<option value="' + d['townId'] + '">' + d['townName'] + '</option>\n'
                }
                $("select[name$=town]").html(str);
                $("select[name$=town]").next().html(data[0]['townName']);
            }
            $.post("/ajax/grid/getVillage", {
                townId: data[0].townId
            }, function (res) {
                if (res.code === 1) {
                    var data = res.data, len = res.data.length;
                    if (len === 0) {
                        $("select[name$=village]").html("");
                        $("select[name$=village]").next().html("没有可以选取的类别");
                    } else {
                        var str = '';
                        for (var i = 0; i < len; i++) {
                            var d = data[i];
                            str += '<option value="' + d['villageId'] + '">' + d['villageName'] + '</option>\n'
                        }
                        $("select[name$=village]").html(str);
                        $("select[name$=village]").next().html(data[0]['villageName']);
                    }
                } else
                    console.log("请求失败！");
            });
        }
        renderForm();
    });

    //改变村
    function select_change(obj) {
        var that = $(obj);
        var select = that[0];
        var select_name = $(select).attr("name");
        var select_type = select_name.split("_")[0] + "_";
        console.log(select_name + ":" + select_type + ":" + select_type + "town");
        if (select_name === select_type + "town")
            $.post("/ajax/grid/getVillage", {
                townId: $(select).val()
            }, function (res) {
                if (res.code === 1) {
                    var data = res.data, len = res.data.length;
                    if (len === 0) {
                        $("select[name=" + select_type + "village]").html("");
                        $("select[name=" + select_type + "village]").next().html("没有可以选取的类别");
                    } else {
                        var str = '';
                        for (var i = 0; i < len; i++) {
                            var d = data[i];
                            str += '<option value="' + d['villageId'] + '">' + d['villageName'] + '</option>\n'
                        }
                        $("select[name=" + select_type + "village]").html(str);
                        $("select[name=" + select_type + "village]").next().html(data[0]['villageName']);

                    }
                    renderForm();
                } else
                    console.log("请求失败！");
            });

    }


    $.post("/ajax/grid/getBigType", {}, function (res) {
        if (res.code === 1) {
            var data = res.data, len = res.data.length;
            if (len === 0) {
                $("select[name=part_typeBig]").html("");
                $("select[name=part_typeBig]").next().html("没有可以选取的类别");
            } else {
                var str = '';
                for (var i = 0; i < len; i++) {
                    var d = data[i];
                    str += '<option value="' + d['code'] + '">' + d['name'] + '</option>\n'
                }
                $("select[name=part_typeBig]").html(str);
                $("select[name=part_typeBig]").next().html(data[0]['name']);
            }
            $.post("/ajax/grid/getSmallType", {
                bigCode: data[0].code
            }, function (res) {
                if (res.code === 1) {
                    var data = res.data, len = res.data.length;
                    if (len === 0) {
                        $("select[name=part_typeSmall]").html("");
                        $("select[name=part_typeSmall]").next().html("没有可以选取的类别");
                    } else {
                        var str = '';
                        for (var i = 0; i < len; i++) {
                            var d = data[i];
                            str += '<option value="' + d['code'] + '">' + d['name'] + '</option>\n'
                        }
                        $("select[name=part_typeSmall]").html(str);
                        $("select[name=part_typeSmall]").next().html(data[0]['name']);
                    }
                } else
                    console.log("请求失败！");
            });
        }
        renderForm();
    });

    function select_change_type(obj) {
        var that = $(obj);
        var select = that[0];
        var select_name = $(select).attr("name");
        if (select_name === "part_typeBig")
            $.post("/ajax/grid/getSmallType", {
                bigCode: $(select).val()
            }, function (res) {
                if (res.code === 1) {
                    var data = res.data, len = res.data.length;
                    if (len === 0) {
                        $("select[name=part_typeSmall]").html("");
                        $("select[name=part_typeSmall]").next().html("没有可以选取的类别");
                    } else {
                        var str = '';
                        for (var i = 0; i < len; i++) {
                            var d = data[i];
                            str += '<option value="' + d['code'] + '">' + d['name'] + '</option>\n'
                        }
                        $("select[name=part_typeSmall]").html(str);
                        $("select[name=part_typeSmall]").next().html(data[0]['name']);
                    }
                } else
                    console.log("请求失败！");
            });

        renderForm();
    }


</script>
